<template>
  <div>
    <div id="main" style="width: 100%; height: 600px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { get_stock_look } from "./axios_api/api";
export default {
  mounted() {
    this.stockExcel();
    this.times();
  },
  destroyed() {
    clearInterval(this.times); //退出页面后销毁定时方法
  },
  data() {
    return {
      opiniondata: [],
      opiniontimeL: [],
    };
  },
  methods: {
    stockExcel() {
      get_stock_look().then((resp) => {
        let the_data = resp.data;
        // 全局数据
        this.opiniondata = the_data.data_l;
        this.opiniontimeL = the_data.time_l;
        this.$nextTick(function () {
          this.drawLine("main");
        });
      });
    },
    drawLine(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        title: {
          text: "全部数据趋势",
          left: 0,
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["交易金额"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },

        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          data: this.opiniontimeL,
        },
        yAxis: {
          scale: true,
          splitArea: {
            show: true,
          },
        },
        series: [
          {
            name: "交易金额",
            type: "line",
            stack: "总量",
            data: this.opiniondata,
          },
        ],
      });
    },
    times() {
      return setInterval(() => {
        this.stockExcel();
      }, 5000);
    },
  },
};
</script>

<style>
</style>